<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>主页</title>
    <link rel="stylesheet" href="/plugins/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/plugins/build/css/app.css" media="all">
    <link rel="stylesheet" href="/plugins/treeTable/themes/vsStyle/treeTable.min.css" media="all">
    <link rel="stylesheet" href="/module/plugins/weixin/css/weixin.css" media="all">
</head>
<body>
<div class="weixin_menu">
    <div class="left">
        <div class="menu_head">
            <img src="/module/plugins/weixin/img/menu_head.png"/>
        </div>
        <div class="menu_show">
            <ul id="menuList"></ul>
        </div>
    </div>
    <div class="menu_content">
        <div class="menu_title">
            <button class="layui-btn" onclick="deploy()">发布</button>
            <button class="layui-btn" onclick="add('0')">
                <i class="layui-icon">&#xe654;</i>
            </button>
        </div>
        <table class="layui-table" id="treeTable">
            <thead>
            <tr>
                <th>菜单名称</th>
                <th>菜单Url</th>
                <th style='width:120px;'>操作</th>
            </tr>
            </thead>
            <tbody id="treeTableBody">

            </tbody>
        </table>
    </div>
</div>
<script src="/plugins/layui/layui.js"></script>
<script src="/plugins/jquery-1.8.3.min.js"></script>
<script src="/plugins/treeTable/jquery.treeTable.js" type="text/javascript"></script>
<script src="/plugins/common.js"></script>
<script>
    //链接url
    var listUrl = SERVER_URL+"/weixinMenu/menuList";
    var addUrl = "add.html";
    var editUrl = "edit.html";
    var delUrl = SERVER_URL+"/weixinMenu/del";
    var deployUrl = SERVER_URL+"/weixinMenu/deploy";

    layui.use(['jquery', 'table', 'form','layer'], function() {
        var $ = layui.jquery;
        var form = layui.form;
        layer.config({
            anim: 5
            ,offset: '50px'
            ,maxmin: true
            ,isOutAnim: false
        });
        refresh();
    });

    function refresh() {
        layer.load(2, {time: 5*1000});
        $.ajax({
            type: 'GET',
            url: listUrl,
            success: function (result) {
                layer.closeAll();
                if(result.code == 20000){
                    initMenuLeft(result.data.showListTree);
                    initMenuList(result.data.listTree);
                }else{
                    layer.msg(result.msg, {time: 1500});
                }
            }
        });
    }

    //行末工具栏
    function initTools(data) {
        var str = "";
        str += "<div class=\"layui-btn-group custom_btn_group\">";
        if(data.menuParentId == "0"){
            str += "<button onclick=\"add('"+data.menuId+"')\" class=\"layui-btn layui-btn-primary layui-btn-sm\"><i class=\"layui-icon\">&#xe654;</i></button>";
        }else{
            str += "<button class=\"layui-btn layui-btn-primary layui-btn-sm\"><i class=\"layui-icon\" style='display: inline-block;width: 16px;'></i></button>";
        }
        str += "<button onclick=\"edit('"+data.menuId+"')\" class=\"layui-btn layui-btn-primary layui-btn-sm\"><i class=\"layui-icon\">&#xe642;</i></button>";
        str += "<button onclick=\"del('"+data.menuId+"')\" class=\"layui-btn layui-btn-primary layui-btn-sm\"><i class=\"layui-icon\">&#xe640;</i></button>";
        str += "</div>";
        return str;
    }


    //拼接菜单数据
    function initMenuList(data) {
        var str = "";
        for(var i in data){
            str += "<tr id=\""+data[i].menuId+"\" pid=\""+data[i].menuParentId+"\">";
            str += "<td>"+data[i].menuName+"</td>";
            if(data[i].menuUrl == "" || data[i].menuUrl == null){
                str += "<td></td>";
            }else{
                str += "<td>"+data[i].menuUrl+"</td>";
            }
            str += "<td style='width:120px;'>"+initTools(data[i])+"</td>";
            str += "</tr>";
        }
        $("#treeTableBody").html("");
        $("#treeTableBody").append(str);
        $("#treeTable").treeTable({expandLevel : 2}).show();
    }

    //初始化菜单显示
    function initMenuLeft(data) {
        var str = "";
        for(var i in data){
            str += "<li>"+data[i].menuName;
            if(data[i].menuList && data[i].menuList.length > 0){
                str += "<dl>";
                for(var j in data[i].menuList){
                    str += "<dd>"+data[i].menuList[j].menuName;
                    str += "</dd>";
                }
                str += "</dl>";
            }
            str += "</li>";
        }
        str += "</li>";

        $("#menuList").html("");
        $("#menuList").append(str);
    }

    //发布
    function deploy() {
        layer.confirm('确定发布？', {
            btn: ['确定','取消']
        }, function(){
            layer.load(2, {time: 5*1000});
            $.ajax({
                type: 'POST',
                url: deployUrl,
                success: function (result) {
                    layer.closeAll();
                    if(result.code == 20000){
                        layer.msg('发布成功', {icon: 1,time: 1000})
                    }else{
                        layer.msg(result.msg, {time: 1500});
                    }
                }
            });
        }, function(){
            layer.closeAll();
        });
    }

    //添加页面
    function add(menuId){
        layer.open({
            area: ['800px', '500px']
            ,type: 2
            ,title: '添加'
            ,content: addUrl+"?id="+menuId
        });
    }

    //添加页面
    function edit(menuId){
        layer.open({
            area: ['800px', '500px']
            ,type: 2
            ,title: '添加'
            ,content: editUrl+"?id="+menuId
        });
    }

    //删除
    function del(menuId) {
        layer.confirm('确定删除该菜单？', {
            btn: ['确定','取消']
        }, function(){
            layer.load(2, {time: 5*1000});
            $.ajax({
                type: 'POST',
                url: delUrl,
                data: {id: menuId},
                success: function (result) {
                    layer.closeAll();
                    if(result.code == 20000){
                        layer.msg('操作成功', {icon: 1,time: 1000}, function(){
                            refresh();
                        })
                    }else{
                        layer.msg(result.msg, {time: 1500});
                    }
                }
            });
        }, function(){
            layer.closeAll();
        });
    }
    
    function reload() {
        layer.closeAll();
        refresh();
    }
</script>
</body>
</html>
